<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:'供应商结算',liner:false}"></header-top>
		<view class="mainpadding ffffff margin_top">
			<view class="box1 flexleft">
				<view class="allbox1text">结算单位：</view>
				<view class="lansebtn allbtn" @click="kehuShow = true">{{dataAll.customer_name}}</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="bianma">{{dataAll.purchase_code}}</view>
				<view class="time">{{date(dataAll.purchase_time*1000)}}</view>
			</view>
		</view>
		<view style="padding-bottom: 250rpx;">
			<view class="box2" v-for="(item,index) in dataAll.sale" :key="item.purchase_number">
				<view class="mainpadding">
					<view class="lanbianma">{{item.purchase_number}}</view>
					<view class="shijianrq">{{item.time_text}}</view>
				</view>
				<view class="mainpadding ffffff">
					<view class="flexbetween">
						<view class="jinetext">单据金额：{{item.money}}</view>
						<view class="jinetext">应收金额：{{item.write_off}}</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="jinetext">已收金额：{{item.preferential_price}}</view>
						<view class="jinetext">已优惠：{{item.preferential_money}}</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="lext flexleft">
							<view class="jinetext">现收金额：</view>
							<view class="xiahuaxian">{{item.write_off_price}}</view>
						</view>
						<view class="right flexleft">
							<view class="jinetext">本次优惠：</view>
							<view class="xiahuaxian">{{item.preferential_price}}</view>
						</view>
					</view>
					<view class="jinetext margin_top">尚欠金额：
						<text style="color:#FF0000;">{{item.write_off_money}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottombox">
			<view class="b-box1 flexleft">
				<view class="yingshou">本次应付：
					<text style="color: #0BBDCB;" class="margin_right">{{dataAll.money || 0.00}}</text>
				</view>
				<view class="yingshou">本次尚欠：
					<text style="color:#FF0000;">{{dataAll.write_off || 0.00}}</text>
				</view>
			</view>
			<view class="b-box2 flexbetween  ffffff">
				<view class="b-box2left">
					<view class="shoukyh flexleft">
						<view class="jinetext">本次收款：
							<text style="color:#0BBDCB;">{{all_money || 0.00}}</text>
						</view>
						<view class="jinetext" style="margin-left: 6rpx;">优惠：
							<text style="color:#0BBDCB;">{{dataAll.preferential_money || 0.00}}</text>
						</view>
					</view>
					<view class="flexleft" v-if="dataAll.account.length">
						<view class="jinetext" style="color: #999999;" v-for="item in dataAll.account" :key="item.id">
							{{item.account_name}}：{{item.money}}
						</view>
					</view>
				</view>
				<view class="b-box2btn">支付方式</view>
			</view>
		</view>

	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				// 客户档案（选择客户档案共七个）
				kehuShow: false,
				kehu: {
					id: "",
					name: ""
				},
				purchase_code: "", //单据编号
				dataAll: {
					"id": 1, //ID
					"purchase_code": "SK20221116001", //单据编号
					"purchase_time": 1668528000, //单据时间
					"customers_id": 1, //客户ID
					"money": -20, //金额
					"write_off": -20, //未核销金额
					"preferential_money": null, //优惠金额
					"remarks": "", //备注
					"examine_status": "0", //审核状态:0=未审核,1=已审核
					"examine_time": null, //审核时间
					"createtime": 1668565112, //创建时间
					"customer_name": "kehu1", //客户
					"account": [{
							"id": 7, //ID
							"money": -10, //金额
							"account_name": "现金" //账户名称
						},
						{
							"id": 8, //ID
							"money": -10, //金额
							"account_name": "微信" //账户名称
						}
					], //付款账户ID
					"sale": [{
						"id": 4, //ID
						"purchase_number": "XHTH20220928001", //原单编号
						"business_type": "3", //单据类型:1=预收单,3=销售,7=订货,8=费用支出
						"type": "2", //类型:1=购货/销货,2=退货,3=期初,4=核销
						"times": 1664294400, //原单日期
						"money": -48, //金额
						"preferential_money": 0, //优惠金额
						"write_off": 0, //未核销金额
						"write_off_money": -48, //未核销金额
						"write_off_price": -20, //本次核销金额
						"preferential_price": 0, //本次优惠金额
						"remark": "备注" //备注
					}]
				},
				all_money: ""
			}
		},
		onLoad(options) {
			this.purchase_code = options.purchase_code
			this.detail()
			uni.hideTabBar(); //隐藏tab
		},

		methods: {
			detail() {
				httpRequest.request('appapi/manage/finance/collection_detail', 'POST', {
					purchase_code: this.purchase_code
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.dataAll = res.data
						let money = 0
						this.dataAll.account.forEach(item => {
							money = money + item.money
						})
						this.all_money = money
					} else {
						httpRequest.toast(res.msg)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 获取编码
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
		}
	}
</script>

<style lang="scss" scoped>
	.gnegduo {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		text-decoration: underline #0BBDCB;
	}

	.fangshi {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.shoukuanje {
		background: rgba(217, 217, 217, .3);
	}

	.jiacu {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	.benciys {
		border: 2rpx solid rgba(153, 153, 153, 0.05);
	}

	.shouqian {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.bottombox {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		// background-color: #fff;  
	}

	.b-box2 {
		padding: 30rpx 30rpx 70rpx;
	}

	.b-box2btn {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		width: 198rpx;
		height: 62rpx;
		background: #00B855;
		border-radius: 74rpx;
	}

	.yingshou {
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	.b-box1 {
		margin: 0 30rpx;
		padding: 15rpx 0 15rpx 20rpx;
		background: #fff8f3;
		border-radius: 16rpx;
	}

	.xiahuaxian {
		text-decoration: underline #0BBDCB;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.jinetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.lanbianma {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.shijianrq {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.bianma {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.time {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	// 定位点点点(蓝色提示)
	.diandiandian {
		position: relative;
	}

	.selectcontent {
		position: absolute;
		top: 50rpx;
		right: -6rpx;
		min-width: 250rpx;
		mix-width: 250rpx;
		text-align: center;
		background-color: rgba(11, 189, 203, 0.8);
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		word-wrap: break-word;
	}

	.sanjiao {
		position: absolute;
		top: -12rpx;
		right: 8rpx;
		background-image: url("@/static/image/system/sanjiao2.png");
		width: 40rpx;
		height: 12rpx;
		background-size: 100% 100%;
	}

	.leftimage {
		width: 34rpx;
		height: 34rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.itemselect {
		padding: 20rpx 30rpx;
	}

	//结束
	.tijiao {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-left: 16rpx;
	}

	.allbox1text {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.box1-btn {
		width: 218rpx;
		height: 52rpx;
		background: rgba(153, 153, 153, .1);
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.duanzejs {
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		text-align: center;
	}

	.allbtn1 {
		margin-right: 30rpx;
	}

	.lansetext {
		font-size: 24rpx;
		text-decoration: underline #0BBDCB;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
		margin-right: 10rpx;
	}

	.allbtn {
		width: 218rpx;
		height: 52rpx;
		border-radius: 50rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.lansebtn {
		color: #0BBDCB;
		background: rgba(11, 189, 203, .1);
	}

	.huisebtn {
		color: #999999;
		background: rgba(153, 153, 153, .1);
	}

	.suretext {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
	}

	.canceltext {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
	}

	.zhengds {
		padding: 40rpx;
	}

	.shurudh {
		border-radius: 24rpx;
		height: 60rpx;
		font-size: 30rpx;
		width: 460rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background: rgba(217, 217, 217, .2);
		text-align: center;
	}

	.btns {
		width: 198rpx;
		height: 62rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.btn2 {
		color: #FFFFFF;
		background: #0BBDCB;
		border-radius: 74rpx;
		margin-left: 30rpx;
	}

	.btn1 {
		border: 1rpx solid #0BBDCB;
		color: #0BBDCB;
		background: #FFFFFF;
		border-radius: 74rpx;
	}
</style>
